<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>

	<body>
		<style>
			#foo /deep/ button {
				color: red;
			}
		</style>
		<div id="foo"></div>

		<template>
			<div id="bar"></div>
		</template>

		<script>
			var host1 = document.querySelector('#foo');
			var root1 = host1.createShadowRoot();
			var template = document.querySelector('template');
			root1.appendChild(document.importNode(template.content, true));

			var host2 = root1.querySelector('#bar');
			var root2 = host2.createShadowRoot();
			root2.innerHTML = '<button>点我点我</button>';
		</script>
	</body>

</html>